// Copyright (c) 2025 coze-dev Authors
// SPDX-License-Identifier: Apache-2.0
/* stylelint-disable max-nesting-depth */
@black: #000000;
@white: #FFFFFF;

@text-gray-0: #1D1C23;
@text-gray-1: #1D1C23CC;
@text-gray-2: #1D1C2399;
@text-gray-3: #1D1C2359;
@text-blue: #4D53E8;
@background-gray-0: #F7F7FA;
@background-gray-1: #F0F0F5;
@background-blue-0: #F1F2FD;
@icon-color: #6B6B75;
@border-color: #1D1C2314;

.horizontal-header {
  position: relative;

  display: flex;
  align-items: center;

  box-sizing: border-box;
  width: 100%;
  margin-bottom: 8px;
}

.vertical-header {
  position: relative;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  width: 100%;
  margin-bottom: 8px;
}


.trace-close {
  margin-right: 12px;

  .close-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    color: @text-gray-2;
  }
}

.trace-profile {
  display: flex;
  gap: 12px;
  align-items: center;

  height: 46px;
  margin-right: 32px;

}


.avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.desc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;

  .name {
    display: flex;
    align-items: center;
    max-width: 260px;

    :global(.semi-typography) {
      font-weight: 600;
      line-height: 20px;
      color: @text-gray-0;
    }
  }

  .detail {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;

    .latency {
      display: flex;
      align-items: center;
      justify-content: center;

      height: 16px;
      padding: 0 6px;

      font-size: 12px;
      line-height: 16px;
      color: @text-gray-2;

      background: @background-gray-1;
      border-radius: 4px;
    }

    .status {
      display: flex;
      gap: 2px;
      align-items: center;
      justify-content: center;

      height: 16px;
      padding: 0 6px;

      border-radius: 4px;

      .icon {
        width: 12px;
        height: 12px;
      }

      .text {
        font-size: 12px;
        line-height: 16px;
      }

      &.error {
        background: #FFE0D2;

        .icon {
          color: #FF441E;
        }

        .text {
          color: #FF441E;
        }
      }

      &.success {
        background: #D2F3D5;

        .icon {
          color: #3EC254;
        }

        .text {
          color: #3EC254;
        }
      }

      &.broken {
        background: #FFF1CC;

        .icon {
          color: #FF9600;
        }

        .text {
          color: #FF9600;
        }
      }

      &.unknown {
        background: #F0F0F5;

        .icon {
          color: #888892;
        }

        .text {
          color: #6B6B75;
        }
      }
    }
  }
}

.trace-info {
  flex: 1;
}

.trace-link {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 8px;

  border: 1px solid @border-color;
  border-radius: 8px;

  /* stylelint-disable-next-line no-descending-specificity */
  .icon {
    color: @icon-color;
  }
}

.icon-wrapper {
  width: 28px;
  height: 28px;

  svg {
    width: 100%;
    height: 100%;
  }
}
